iT邦幫忙

2021 iThome 鐵人賽

DAY 16
1
Modern Web

Angular 常見問題大小事系列 第 16

Angular ng-template 與 ngTemplateOutlet

  • 分享至 

  • xImage
  •  

ngTemplateOutlet

ngTemplateOutlet 這裡我解釋為 ng-template 裡的插槽

來看看實際上會是如何使用
先來段程式碼,這裡為一筆物件資料

json = {
  key: `1`,
  name: "Joe Black",
  age: 32,
  address: "Sidney No. 1 Lake Park",
};

HTML

<ng-container
  [ngTemplateOutlet]="jsonData"
  [ngTemplateOutletContext]="{ $implicit: json }"
></ng-container>

<ng-template #jsonData let-data> {{ data.name }} {{ data.age }} </ng-template>

ngTemplateOutlet 這個插槽的名字 我們取做 jsonData
在 ng-template 的插頭就要叫設定為 #jsonData

當它們這組名字對應到的時後 ng-template 裡的內容 就會在 ngTemplateOutlet 的地方呈現出來

$implicit: 為 ngTemplateOutlet 裡的預設值
在 ng-template 裡我們 設一個 叫 data 的變數 let-data
此時 let-data 就是對應到 上面 ts 傳進的 josn 資料物件


註:ngTemplateOutlet 的 另一種寫法

<ng-container
  *ngTemplateOutlet="jsonData; context: { $implicit: json }"
></ng-container>

在 ngTemplateOutletContext 裡多做一些變數

來看看程式碼

<ng-container
  [ngTemplateOutlet]="jsonData"
  [ngTemplateOutletContext]="{ $implicit: json, name: 'Mandy' }"
></ng-container>

<ng-template #jsonData let-data let-myname="name">
  {{ data.name }} {{ data.age }} {{ myname }}</ng-template
>

在 ngTemplateOutletContext 多設一個新的值 name: Mandy
ng-template 設一個新的變數叫 myname 裡的值會對應到 ngTemplateOutletContext 裡面的 name
以此類推


參考資料:https://stackoverflow.com/questions/45055384/what-is-implicit-in-angular-2


上一篇
Angular ng-container 與 ng-template
下一篇
Angular ElementRef、TemplateRef、viewContainerRef 的區別
系列文
Angular 常見問題大小事31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Tim Hsu
iT邦新手 1 級 ‧ 2021-09-30 09:44:06

原來這是插槽的概念,最近專案上剛好有遇到協作的切版人員有使用到這個屬性

我要留言

立即登入留言